<template>
	<!-- 公共头部 -->
	<common-head :isShowBackBtn="false"></common-head>
	<scroll-view scroll-y="true" :scroll-top="scrollTop" :style="{ height: windowConHeight  + 'px' }">
	<view class="main1" v-if="step == 0" :style="{ height: windowConHeight + 'px' }">
		<view class="title">3分钟获取护肤方案</view>
		<view class="tips">基于中国国民调查CHNS FFQ，中国居民 皮肤护理评估FFQ、美国NHANES FFQ已有1,000,000人完成评估</view>
		<view class="btn" @click="ceshi1">点击继续</view>
	</view>
	
	<!-- 流程 -->
	<view class="main2" v-if="step == 1" :style="{ height: windowConHeight + 'px' }">
		<view class="process">
			<view class="item on">
				<view class="num">1</view>
				<view class="txt">基本信息</view>
			</view>
			<view class="item">
				<view class="num">2</view>
				<view class="txt">您的需求</view>
			</view>
			<view class="item">
				<view class="num">3</view>
				<view class="txt">生活模式</view>
			</view>
			<view class="item">
				<view class="num">4</view>
				<view class="txt">其他</view>
			</view>
			<view class="line line1"></view>
			<view class="line line2"></view>
			<view class="line line3"></view>
		</view>
		<!-- <image class="img" src="https://build.gzwhir.com/zygzmr202410252905/appImages/process.jpg" mode=""></image> -->
		<view class="btn" @click="ceshi2">开始答题</view>
	</view>
	
	<!-- 20道题目 -->
	<view class="main3" v-if="step == 2">
		<view class="order-box">
			<view class="num-on">01</view>
			<view class="num">/20</view>
		</view>
		<view class="title-box">您的性别？</view>
		<view class="con-box">
			<!-- 样式一 选择圆形图标 -->
			<!-- <view class="checkicon-box">
				<view class="item on">
					<view class="img-box"><image class="img" src="@/static/images/girl.png" mode=""></image></view>
					<view class="txt">女</view>
				</view>
				<view class="item">
					<view class="img-box"><image class="img" src="@/static/images/boy.png" mode=""></image></view>
					<view class="txt">男</view>
				</view>
			</view> -->
			
			<!-- 样式二 输入文本 -->
			<!-- <view class="input-box">
				<input placeholder="请输入您的年龄" />
			</view> -->
			
			<!-- 样式三 选择题 -->
			<view class="checkbox-box">
				<view class="item on">
					<view class="item-l">A</view>
					<view class="item-r">皮肤很少出现泛红、瘙痒等情况，对各种护肤品适应性良好</view>
				</view>
				<view class="item">
					<view class="item-l">B</view>
					<view class="item-r">皮肤在季节变化时容易出现泛红、瘙痒、刺痛等情况</view>
				</view>
				<view class="item">
					<view class="item-l">C</view>
					<view class="item-r">皮肤经常出油，但没有其他不适症状</view>
				</view>
				<view class="item">
					<view class="item-l">D</view>
					<view class="item-r">皮肤颜色暗沉，但没有敏感的表现准</view>
				</view>
				<view class="item">
					<view class="item-l">E</view>
					<view class="item-r">
						<view>其他</view>
						<view class="other-input">
							<input placeholder="请输入原因" />
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="ft-img-box">
			<image class="img" src="@/static/images/img1.png" mode=""></image>
		</view>
		
		<view class="btn-box">
			<view class="item lastBtn">上一题</view>
			<view class="item nextBtn on" @click="ceshi3">下一题</view>
		</view>
	</view>
	
	<!-- 填写名字，提交问卷 -->
	<view class="main4" v-if="step == 3">
		<view class="title">填写名字，提交问卷</view>
		<view class="tips">该名称会出现在产品包装上</view>
		
		<view class="main4-con">
			<image class="bgImg" src="@/static/images/img2.png" mode=""></image>
			<view class="main4-con-hd">
				<image class="logo" src="@/static/images/logo1.png" mode=""></image>
				<view class="date-box">
					<view class="day">05</view>
					<view class="year">2024/11</view>
				</view>
			</view>
			<view class="main4-con-bd">
				<view class="sayHello">Hello</view>
				<input placeholder="请输入您的姓名" />
			</view>
			<view class="main4-con-ft">
				<image class="img" src="@/static/images/erweima.png" mode=""></image>
				<view class="txt">Personalized Dietary Supplements</view>
			</view>
		</view>
		
		<view class="submit-btn" @click="handleSubmit">提交问卷</view>
	</view>
	</scroll-view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	
	// 页面步骤
	let step = ref(0)
	let scrollTop = ref(0)
	
	// 测试看效果代码开始
	let ceshi1 = () => {
		step.value = 1
		scrollTop.value = 1
	}
	let ceshi2 = () => {
		step.value = 2
		scrollTop.value = 2
	}
	let ceshi3 = () => {
		step.value = 3
		scrollTop.value = 1
	}
	// 测试看效果代码结束
	
	
	
	// 手机可视高度
	let windowHeight = ref(0)
	// 手机内容高度
	let windowConHeight = ref(0)
	onLoad(() => {
		uni.getSystemInfo({
			success: function (res) {
				windowHeight.value = res.windowHeight; // 手机可视高度
			}
		});
		// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
		let custom = uni.getMenuButtonBoundingClientRect()
		// 获取手机头部到内容的安全距离
		let {safeAreaInsets} = uni.getSystemInfoSync()
		// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
		let barHeight = custom.height + (custom.top - safeAreaInsets.top) * 2
		// 总体高度 = 状态栏高度 + 导航栏高度
		let headHeight = barHeight + safeAreaInsets.top
		// 最终得到内容高度
		windowConHeight.value = windowHeight.value - headHeight
	});
	
	
	let handleSubmit = () => {
		step.value = 0
		uni.navigateTo({
			url: "/pages/report/wait"
		})
	}
</script>

<style lang="scss">
.main1{
	width: 750rpx;
	position: relative;
	background: url("https://build.gzwhir.com/zygzmr202410252905/appImages/custom-bg.jpg") no-repeat;
	background-size: cover;

	.title{
		font-size: 42rpx;
		color: #333;
		font-weight: bold;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 3%;
	}
	.tips{
		font-size: 24rpx;
		color: #555;
		line-height: 42rpx;
		text-align: center;
		width: 460rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 12%;
	}
	.btn{
		background: #cfecf1;
		width: 90%;
		height: 90rpx;
		border-radius: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 9%;
	}
}

// 流程
.main2{
	padding-top: 200rpx;
	box-sizing: border-box;
	position: relative;
	width: 750rpx;
	background: url("https://build.gzwhir.com/zygzmr202410252905/appImages/process.jpg") no-repeat;
	background-size: cover;
	
	.process{
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
		
		.line{
			width: 104rpx;
			height: 2rpx;
			background: #c1c2c5;
			position: absolute;
		}
		.line1{
			left: 21%;
			top: 20%;
		}
		.line2{
			left: 48%;
			top: 20%;
		}
		.line3{
			left: 72%;
			top: 20%;
		}
		
		.item{
			text-align: center;
			
			.num{
				width: 45rpx;
				height: 45rpx;
				border-radius: 45px;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #333;
				margin: 0 auto 30rpx;
			}
			.txt{
				font-size: 24rpx;
				color: #888;
			}
			
			&.on{
				.num{
					background: #cfecf1;
					position: relative;
					
					&::before{
						content: '';
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translate(-50%, -50%);
						width: 30rpx;
						height: 30rpx;
						border: 4rpx solid #f2f4f8;
						border-radius: 20px;
					}
				}
				.txt{
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
				}
			}
		}
	}
	.img{
		width: 750rpx;
		height: 1200rpx;
	}
	.btn{
		background: #cfecf1;
		width: 90%;
		height: 90rpx;
		border-radius: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 9%;
	}
}

.main3{
	.order-box{
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		
		.num-on{
			font-size: 28rpx;
			color: #333;
		}
		.num{
			font-size: 22rpx;
			color: #999;
		}
	}
	.title-box{
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		padding-left: 40rpx;
		padding-top: 20rpx;
	}
	.con-box{
		padding-top: 80rpx;
		padding: 80rpx 40rpx 180rpx;
		
		.checkicon-box{
			display: flex;
			align-items: center;
			justify-content: space-around;
			
			.item{
				
				.img-box{
					width: 180rpx;
					height: 180rpx;
					border-radius: 180px;
					background: #e6e6e6;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 30rpx;
					.img{
						width: 71rpx;
						height: 92rpx;
					}
				}
				.txt{
					font-size: 28rpx;
					color: #333;
					text-align: center;
				}
				
				&.on{
					.img-box{
						background: #ffe1e9;
					}
				}
			}
		}
		
		.input-box{
			border-bottom: 1px solid #e1e1e1;
			padding-bottom: 30rpx;
			width: 100%;
		}
		.checkbox-box{
			
			.item{
				display: flex;
				// align-items: center;
				margin-bottom: 50rpx;
				
				.item-l{
					width: 50rpx;
					height: 50rpx;
					line-height: 40rpx;
					border-radius: 50px;
					background: #e6e6e6;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 22rpx;
					color: #333;
					margin-right: 20rpx;
				}
				.item-r{
					flex: 1;
					
					.other-input{
						padding-top: 30rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #e1e1e1;
					}
				}
				
				&.on{
					.item-l{
						background: #cfecf1;
					}
				}
			}
		}
	}
	
	
	.ft-img-box{
		.img{
			width: 750rpx;
			height: 569rpx;
		}
	}
	
	.btn-box{
		position: fixed;
		left: 5%;
		bottom: 5%;
		width: 100%;
		
		.item{
			width: 90%;
			height: 90rpx;
			border-radius: 90px;
			background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 30rpx;
			font-size: 28rpx;
			color: #333;
			
			&.on{
				background: #cfecf1;
			}
		}
	}
}

.main4{
	padding-top: 120rpx;
	padding-bottom: 80rpx;
	
	.title{
		font-size: 42rpx;
		color: #333;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.tips{
		font-size: 24rpx;
		color: #888;
		text-align: center;
	}
	.main4-con{
		width: 84%;
		height: 756rpx;
		background: #fff;
		border-radius: 10rpx;
		margin: 60rpx auto;
		padding: 50rpx;
		box-sizing: border-box;
		position: relative;
		
		.bgImg{
			position: absolute;
			z-index: -1;
			right: -50rpx;
			bottom: -50rpx;
			width: 715rpx;
			height: 805rpx;
		}
		
		.main4-con-hd{
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.logo{
				width: 205rpx;
				height: 40rpx;
			}
			.date-box{
				text-align: right;
				position: relative;
				padding-bottom: 20rpx;
				
				&::before{
					content: "";
					position: absolute;
					right: 0;
					bottom: 0;
					width: 24rpx;
					height: 4px;
					background: #aaa;
				}
				.day{
					font-size: 40rpx;
					color: #555;
				}
				.year{
					font-size: 22rpx;
					color: #555;
				}
			}
		}
		.main4-con-bd{
			margin-top: 70rpx;
			padding-bottom: 30rpx;
			border-bottom: 1px solid #e1e1e1;
			.sayHello{
				font-size: 52rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 50rpx;
			}
		}
		.main4-con-ft{
			margin-top: 100rpx;
			.img{
				width: 140rpx;
				height: 140rpx;
				display: block;
			}
			.txt{
				font-size: 24rpx;
				color: #333;
				margin-top: 10rpx;
			}
		}
	}
	
	.submit-btn{
		width: 84%;
		height: 90rpx;
		border-radius: 90px;
		background: #cfecf1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin: 200rpx auto 0;
	}
}


</style>
